<template>
  <section class="container">
    <el-row class="header">
      <el-col :span="24">
        <div class="float-left">
          <img class="logo" :src="systemInfo.logo" alt="">
          <span class="name">{{ systemInfo.name }}</span>
        </div>
        <div class="float-right">
          <el-dropdown class="drop-menu" @command="dropClick">
            <span class="user-name">{{ userInfo.username }}
              <i class="el-icon-caret-bottom el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="1">退出</el-dropdown-item>
              <el-dropdown-item command="2" v-if="listRole('studentDropOut') && $store.getters.getNetType === 'school'">查看退学记录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-col>
    </el-row>
    <el-row class="content clearfix">
      <div class="side float-left">
        <el-menu class="el-menu-vertical-demo" :default-active="$route.path" unique-opened router>
          <template v-for="(item, index) in $router.options.routes">
            <el-menu-item v-if="!item.hidden && !item.multiple" :key="index" :index="item.children[0].path"><i :class="item.icon"></i>{{item.children[0].meta.title}}</el-menu-item>
            <el-submenu v-if="!item.hidden && item.multiple" :key="index" :index="index.toString()">
              <template slot="title"><i :class="item.icon"></i>{{item.meta.title}}</template>
              <el-menu-item v-for="(child, idx) in item.children" :key="idx" :index="child.path" v-if="!child.hidden">
                <i :class="child.icon"></i>{{child.meta.title}}
              </el-menu-item>
            </el-submenu>
          </template>
        </el-menu>
      </div>
      <div class="content-box">
        <transition name="fade" mode="out-in">
          <router-view/>
        </transition>
      </div>
    </el-row>
  </section>
</template>
<script>
import store from 'src/store'
export default {
  data () {
    return {
      userInfo: {}, // 用户信息
      systemInfo: {}
    }
  },
  async created () {
    this.userInfo = JSON.parse(window.localStorage.loginForm)
    let res = await store.dispatch('setSystemInfo')
    this.systemInfo = res.net
  },
  beforeRouteEnter (to, from, next) {
    if (to.name === 'home') {
      if (store.getters.getRole) { // 非管理员登录
        next({name: store.getters.getRoleList[0].routeName})
      } else {
        next({name: 'index'})
      }
    } else {
      next()
    }
  },
  methods: {
    dropClick (value) { // 下拉菜单
      if (value === '1') {
        window.location.href = '/login'
      } else if (value === '2') {
        this.$router.push({name: 'studentDropOut'})
      }
    }
  }
}
</script>
<style lang="less" scoped>
.fade-enter-active,
.fade-leave-active {
	transition: all .2s ease;
}

.fade-enter,
.fade-leave-active {
	opacity: 0;
}
.container {
  width: 100%;
  height: 100%;
}
.header {
  height: 80px;
  line-height: 80px;
  background: #20a0ff;
  color:#fff;
  padding: 0 30px;
  .logo {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin-top: -8px;
  }
  .name {
    font-size: 26px;
    margin-left: 10px;
  }
  .drop-menu {
    color: #fff;
    line-height: 0;
  }
}
.content {
  position: absolute;
  top: 80px;
  width: 100%;
  bottom: 0px;
  .el-menu, .side {
    height: 100%;
  }
  .side {
    width: 210px;
    .el-menu-item {
      font-size: 16px;
    }
  }
}
.content-box {
  height: 100%;
  overflow-y: auto;
}
</style>
